<template>
  <div class="location-status">
    <el-card class="location-card" shadow="hover">
      <template #header>
        <div class="location-header">
          <el-icon class="location-icon" :class="locationIconClass">
            <component :is="locationIcon" />
          </el-icon>
          <span class="location-title">{{ locationTitle }}</span>
          <el-button
            size="small"
            @click="refreshLocation"
            :loading="loading"
            :disabled="loading"
          >
            刷新位置
          </el-button>
        </div>
      </template>

      <div class="location-content">
        <div v-if="location" class="location-info">
          <div class="address">
            <el-icon><Position /></el-icon>
            <div class="address-text">
              <div class="main-address">{{ location.address }}</div>
              <div v-if="location.city && location.province" class="city-info">
                <span class="city">{{ location.city }}</span>
                <span class="separator">·</span>
                <span class="province">{{ location.province }}</span>
              </div>
            </div>
          </div>

          <div class="location-details">
            <el-tag :type="sourceTagType" size="small">
              {{ sourceText }}
            </el-tag>

            <span v-if="location.accuracy" class="accuracy">
              精度: {{ Math.round(location.accuracy) }}米
            </span>

            <span class="coordinates">
              {{ location.latitude?.toFixed(4) }}, {{ location.longitude?.toFixed(4) }}
            </span>

            <span v-if="location.district" class="district">
              {{ location.district }}
            </span>
          </div>
        </div>

        <div v-if="error" class="location-error">
          <el-alert
            :title="errorTitle"
            :description="errorDescription"
            type="warning"
            show-icon
            :closable="false"
          />

          <div class="error-solutions">
            <h4>解决方案：</h4>
            <ul>
              <li v-for="solution in errorSolutions" :key="solution">
                {{ solution }}
              </li>
            </ul>
          </div>
        </div>

        <div v-if="loading" class="location-loading">
          <el-skeleton :rows="2" animated />
          <p class="loading-text">{{ loadingText }}</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import {
  Location,
  Position,
  Warning,
  Refresh
} from '@element-plus/icons-vue'

const props = defineProps({
  location: {
    type: Object,
    default: null
  },
  loading: {
    type: Boolean,
    default: false
  },
  error: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['refresh'])

// 计算属性
const locationIcon = computed(() => {
  if (props.error) return Warning
  if (props.loading) return Refresh
  if (props.location?.source === 'gps') return Position
  return Location
})

const locationIconClass = computed(() => {
  if (props.error) return 'error'
  if (props.loading) return 'loading'
  if (props.location?.source === 'gps') return 'gps'
  return 'default'
})

const locationTitle = computed(() => {
  if (props.error) return '定位失败'
  if (props.loading) return '正在定位...'
  if (props.location) return '当前位置'
  return '位置信息'
})

const sourceText = computed(() => {
  if (!props.location) return ''

  const sourceMap = {
    'gps': 'GPS定位',
    'ip': 'IP定位',
    'amap_ip': '高德IP定位',
    'default': '默认位置'
  }

  return sourceMap[props.location.source] || '未知来源'
})

const sourceTagType = computed(() => {
  if (!props.location) return 'info'

  const typeMap = {
    'gps': 'success',
    'ip': 'warning',
    'amap_ip': 'primary',
    'default': 'info'
  }

  return typeMap[props.location.source] || 'info'
})

const loadingText = computed(() => {
  return '正在获取您的位置信息，请稍候...'
})

const errorTitle = computed(() => {
  if (!props.error) return ''

  if (props.error.code === 1) return '位置权限被拒绝'
  if (props.error.code === 2) return 'GPS信号不可用'
  if (props.error.code === 3) return '定位请求超时'

  return '定位失败'
})

const errorDescription = computed(() => {
  if (!props.error) return ''

  if (props.error.code === 1) {
    return '您拒绝了位置权限请求，系统将使用IP定位提供大致位置信息。'
  }
  if (props.error.code === 2) {
    return '无法获取GPS信号，可能是因为您在室内或GPS被禁用，系统将使用IP定位。'
  }
  if (props.error.code === 3) {
    return '定位请求超时，可能是网络问题或GPS信号弱，系统将使用IP定位。'
  }

  return '无法获取精确位置，系统将使用备用定位方式。'
})

const errorSolutions = computed(() => {
  if (!props.error) return []

  if (props.error.code === 1) {
    return [
      '点击浏览器地址栏的位置图标，允许位置访问',
      '在浏览器设置中启用位置服务',
      '刷新页面并重新授权位置权限'
    ]
  }
  if (props.error.code === 2) {
    return [
      '移动到室外或窗边获得更好的GPS信号',
      '检查设备的位置服务是否已启用',
      '尝试重启设备的位置服务'
    ]
  }
  if (props.error.code === 3) {
    return [
      '检查网络连接是否稳定',
      '移动到信号更好的位置',
      '稍后再试或手动选择城市'
    ]
  }

  return [
    '检查浏览器是否支持地理位置功能',
    '确保网站使用HTTPS协议',
    '尝试刷新页面重新定位'
  ]
})

// 方法
const refreshLocation = () => {
  emit('refresh')
}
</script>

<style scoped>
.location-status {
  margin-bottom: 16px;
}

.location-card {
  border-radius: 8px;
}

.location-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.location-icon {
  font-size: 18px;
}

.location-icon.gps {
  color: #67c23a;
}

.location-icon.error {
  color: #f56c6c;
}

.location-icon.loading {
  color: #409eff;
  animation: spin 1s linear infinite;
}

.location-icon.default {
  color: #909399;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.location-title {
  flex: 1;
  font-weight: 500;
}

.location-content {
  padding: 0;
}

.location-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
}

.address-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.main-address {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  line-height: 1.4;
}

.city-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #606266;
}

.city {
  font-weight: 500;
  color: #409eff;
}

.separator {
  color: #c0c4cc;
}

.province {
  color: #909399;
}

.location-details {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #909399;
}

.accuracy {
  padding: 2px 6px;
  background: #f0f9ff;
  border-radius: 4px;
  color: #1890ff;
}

.coordinates {
  font-family: monospace;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
}

.district {
  padding: 2px 6px;
  background: #f0f9ff;
  border-radius: 4px;
  color: #1890ff;
  font-size: 12px;
}

.location-error {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.error-solutions {
  padding: 12px;
  background: #fdf6ec;
  border-radius: 6px;
  border-left: 3px solid #e6a23c;
}

.error-solutions h4 {
  margin: 0 0 8px 0;
  color: #e6a23c;
  font-size: 14px;
}

.error-solutions ul {
  margin: 0;
  padding-left: 16px;
}

.error-solutions li {
  margin-bottom: 4px;
  font-size: 13px;
  color: #606266;
}

.location-loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.loading-text {
  text-align: center;
  color: #909399;
  font-size: 14px;
  margin: 0;
}
</style>
